<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息注册</title>

    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./css/nessage.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="./js/global-axios.js"></script>
    <script src="./js/qs.js"></script>
    <script src="./js/addapi.js"></script>
</head>

<body>
    <div id="header">
        <h1>信息员注册</h1>
    </div>
    <div id="content">
        <div>
            <div class="reveser"><a href="./login.html">← 返回</a><span>|</span>
                <p>用户注册</p>
            </div>
        </div>
        <div>
            <hr>
        </div>
        <form action="">
            <div class="information form-group account sureName">
                <label class="control-label"><sup>*</sup>真实姓名</label>
                <input type="text" class="form-control " name="username"><span>0/30</span>
            </div>
            <div class="information form-group phonenum card">
                <label class="control-label"><sup>*</sup>身份证号码</label>
                <input type="text" class="form-control" name="username"><span>0/18</span>
            </div>
            <div class="information form-group">
                <label class="control-label"><sup>*</sup>初始密码</label>
                <input type="text" class="form-control" name="password"><span></span>
            </div>
            <div class="information form-group">
                <label class="control-label align-items-center"><sup>*</sup>确认密码</label>
                <input type="text" class="form-control" name="password"><span></span>
            </div>
            <div class="information form-group phonenum phones">
                <label class="control-label"><sup>*</sup>手机号码</label>
                <input type="text" class="form-control" name="phonename"><span>0/11</span>
            </div>
            <div class="information contrue form-group align-items-center">
                <label class="control-label"><sup>*</sup>验证码</label>
                <input type="text" class="form-control input-sm" name="password"><button
                    class="btn btn-success">获取验证码</button>
            </div>
            <div class="town information">
                <p>选择镇街</p>
                <select class="form-control towns">
                    <option value="" selected hidden disabled>请选择 </option>
                </select>
                <p>选择村庄</p>
                <select class="form-control countryside">
                    <option value="" selected hidden disabled>请选择 </option>
                </select>
            </div>
            <div class="information reason form-group account why">
                <label class="control-label">
                    <p><sup>*</sup>申请理由</p>
                </label>
                <textarea class="form-control" name="password"></textarea><span>0/500</span>
            </div>
            <div class="getit">
                <button type="submit" class="btn btn-info ">立即创建</button>
                <button type="reset" class="btn">重置</button>
            </div>
        </form>


    </div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrapValidator.min.js"></script>
<script>
    $(function () {
        $('form')
            .bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    username: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: '账号不能为空'
                            },
                            stringLength: {
                                min: 3,
                                max: 11,
                                message: '账号要在3-11之间'
                            },
                            /*remote: {
                                url: 'remote.php',
                                message: 'The username is not available'
                            },*/
                            regexp: {
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '账号格式错误！'
                            }
                        }
                    },
                    phonename: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: '手机号号不能为空'
                            },
                            stringLength: {
                                min: 11,
                                max: 11,
                                message: '请输入正确的手机号'
                            },
                            /*remote: {
                                url: 'remote.php',
                                message: 'The username is not available'
                            },*/
                            regexp: {
                                regexp: /^[0-9]+$/,
                                message: '手机号格式错误！'
                            }
                        }
                    },
                    Chinese: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: '名字不能为空'
                            },
                            // stringLength: {
                            //     min: 11,
                            //     max: 11,
                            //     message: '请输入正确的手机号'
                            // },
                            /*remote: {
                                url: 'remote.php',
                                message: 'The username is not available'
                            },*/
                            regexp: {
                                regexp: /^[\u4e00-\u9fa5]+$/,
                                message: '请输入汉字！'
                            }
                        }
                    },
                    email: {
                        validators: {
                            notEmpty: {
                                message: 'The email address is required and can\'t be empty'
                            },
                            emailAddress: {
                                message: 'The input is not a valid email address'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '此项不能为空'
                            }
                        }
                    }
                }
            })
    })
     function getLonger(item,index,num) {
         let items=document.querySelector(item)
         let indexs=document.querySelector(index)
        items.onkeyup = () => {
            let long = items.value.length
            indexs.innerHTML = ''
            indexs.innerHTML = long + '/'+num
            items.setAttribute('maxlength', num)
        }
    }
    getLonger('.sureName input','.sureName span',30)
    getLonger('.card input','.card span',18)
    getLonger('.phones input','.phones span',11)
    getLonger('.why textarea','.why span',500)

</script>
<script>
    Addpi.login()
</script>
</html>